{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鸟类观察</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/pagination.css' %}">
</head>
{% include 'head.html' %}
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6-md-offset-3">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th><h4>编号</h4></th>
                            <th><h4>日期</h4></th>
                            <th><h4>地点</h4></th>
                            <th><h4>现象</h4></th>
                            <th><h4>备注</h4></th>
                            <th><h4>数据</h4></th>
                            <th><h4>结果</h4></th>
                            <th><a href="{% url 'observations:detect' %}" class="btn btn-primary">实况识别</a></th>
                            <th><a href="{% url 'observations:add' %}" class="btn btn-primary">添加观察记录</a></th>
{#                            <th>#}
{#                                <a href="" class="btn btn-primary">上传观察视频识别</a>#}
{#                                <input type="file" id="File" name="File" required></th>#}
{#                            </th>#}
                        </tr>
                    </thead>
                    <tbody>
                     {% for observations in observations_message %}
                         <tr>
                             <th>{{ observations.id }}</th>
                             <th>{{ observations.date }}</th>
                             <th>{{ observations.location }}</th>
                             <th>{{ observations.description }}</th>
                             <th>{{ observations.additional_notes }}</th>
                             <th><img width="124" height="124" src="{% static observations.observation_data %}"/></th>
                             <th>{{ observations.tags }}</th>
                             <th><a href="{% url 'observations:change' observations.id %}" class="btn btn-info" onclick="updateEmpById()">编辑</a></th>
                             <th><a href="{% url 'observations:delete' observations.id%}" class="btn btn-danger" onclick="deleteEmpById()">删除</a></th>
                             <th><a href="{% url 'observations:classify' observations.id observations_message.number%}" class="btn btn-primary">甄别</a></th>
                             {% if observations.tags %}
                                 <th>
                                     <a href="{% url 'observations:knowledge' observations.id observations.tags%}" class="btn-group">
                                         <span style="font-size: 15px">科普知识&#128269;</span>
                                     </a>
                                 </th>
                             {% endif%}
                         </tr>
                     {% empty %}
                        <tr><td colspan="8"><label>暂无数据</label></td></tr>
                     {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="btn-group-sm-container" style="margin-top: 10px;">
        <div class="btn-group-sm">
            <span class="step-links">
                <p class="card-text">
                    {% if observations_message.has_previous %}
                        <a href="?page={{ 1 }}" class="btn btn-success">第一页</a>
                        <a href="?page={{ observations_message.previous_page_number }}" class="btn btn-success">上一页</a>
                    {% endif %}

                    当前：{{ observations_message.number }} / {{ observations_message.paginator.num_pages }}

                    {% if observations_message.has_next %}
                        <a href="?page={{ observations_message.next_page_number }}" class="btn btn-success">下一页</a>
                        <a href="?page={{ observations_message.paginator.num_pages }}" class="btn btn-success">最后一页</a>
                    {% endif %}
                </p>
            </span>
         </div>
    </div>
    <script>
            function deleteEmpById(id){
                if(confirm("确定删除数据吗？")){
                    url = "/observations/delete/" + id;
                    window.location = url;
                }
            }
            function updateEmpById(id){
                url = "/observations/change/" + id;
                window.location = url;
            }
    </script>
</body>
</html>